<template>
    <div>
        <el-form ref="form" :model="obj.data" label-width="60px">
            <el-form-item label="标题" prop="name" :rules="[formRulesMixin.notNull]">
                <el-input v-model="obj.data.name" clearable autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item class="dialog-btns-item">
                <div class="dialog-btns">
                    <span class="btn clear" @click="$emit('close')">取消</span>
                    <span class="btn sub ml10" @click.prevent="upData">提交</span>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRaw,inject } from 'vue'
    let { proxy } = getCurrentInstance()

    const props = defineProps({
        id: { type: String, default: 0 },
        name: { type: String, default: "" },
    })

    let obj = reactive({
        data:{
            id: 0,
            name: '',
        },
    })
    let init = async () => {
        obj.data.id = props.id||0
        obj.data.name = props.name
    }
    init()
    let upData = () => {
        proxy.$refs['form'].validate(valid => {
            if (valid) {
                proxy.$ajax({
                    url: 'subject/type_design',
                    data: obj.data,
                    bfLoading: true,
                    timeout:60000
                }).then(d => {
                    if(d.success){
                        proxy.elMessageMixin(`${obj.data.id>0?'修改':"添加"}成功`, 'success')
                        proxy.$emit('init')
                        proxy.$emit('close')
                        //并刷新主界面
                    }else{
                        proxy.elMessageMixin(d.err, 'error')
                    }
                }).catch(() => { })
            }else{
                return false
            }
        })
    }
</script>

<style scoped>
    .btn.sub.sub1 { width: 100px; margin:0; }
    .item { padding: 5px 0; display: flex; flex: 1; }
    .clear { width: 80px; height: 30px; box-sizing: border-box; margin-left: 10px; border: 1px solid #C0C4CC; border-radius: 6px; display: flex; justify-content: center; align-items: center; }
</style>